<%@ page pageEncoding='UTF-8'%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<s:set var="contextPath" value="#request.get('javax.servlet.forward.context_path')" scope="request" />
<!DOCTYPE html>
<head>
    <title>Patient Details</title>
    <%-- header --%>
    <jsp:include page="/WEB-INF/content/common/Header.jsp" flush="true"/>
    <script src="${contextPath}/js/patient/patient.js"></script>
</head>
<body class="metro view">
	<%-- tob-bar --%>
    <jsp:include page="/WEB-INF/content/common/TopBar.jsp" flush="true"/>
       	
	<div id="main-container" class="body-wrapper">
        <%-- tob-container --%>
    	<jsp:include page="/WEB-INF/content/common/TopContainer.jsp" flush="true"/>
        
    	<div id="body-container">
        	<div id="patient-detail-container" class="detail-container">
                <%-- header-container --%>
        		<s:set var="mode" value="'details'"/>
    			<jsp:include page="/WEB-INF/content/patient/PatientMenuContainer.jsp" flush="true"/>
    			        
                <div class="user-info-container patient-detail-container">
                	<div class="tile quadro double-vertical">
                		<div class="user-profile-info-container ${guiPatient.male ? 'bg-lightBlue' : 'bg-lightPink'}">
                			<div class="user-profile-image place-left">
                				<s:if test="%{guiPatient.male}">
          							<img class="list-icon bg-lightBlue" src="${contextPath}/img/icon/Man-128.png"/>
         						</s:if>
         						<s:elseif test="%{guiPatient.female}">
          							<img class="list-icon bg-lightPink" src="${contextPath}/img/icon/Woman-128.png"/>
         						</s:elseif>
                			</div>
                			<div class="user-profile-info">
                				<div class="subheader">${guiPatient.name}</div>
                				<div class="subheader">${guiPatient.age} <span class="subheader-secondary">years old</span></div>
                			</div>
                			<div class="user-profile-info-block-container">
	                			<div class="user-profile-info-block place-left">
	                				<label>Gender</label>
	                				<div class="subheader">${guiPatient.gender}</div>
	                			</div>
	                			<div class="user-profile-info-block place-left">
	                				<label>Date of Birth</label>
	                				<div class="subheader">${guiPatient.dobString}</div>
	                			</div>
	                			<div class="user-profile-info-block place-left">
	                				<label>Telephone</label>
	                				<div class="subheader">${guiPatient.contact.telNo}</div>
	                			</div>
	                			<div class="user-profile-info-block place-left">
	                				<label>Address</label>
	                				<div class="subheader"><small>${guiPatient.contact.address}</small></div>
	                			</div>
                			</div>
                			<br clear="all"/>
                		</div>
                	</div>
                	<a id="btn-add-prescription" href="${contextPath}/prescription/registration?patientId=${guiPatient.userId}">
	                	<div class="tile double header fg-white bg-darkBlue user-meta-info-container">
                			<i class="icon-file-3 fg-white"></i>
	                		<div class="subheader-secondary" style="margin-top: 15px;">New Prescription</div>
	                	</div>
               		</a>
               		<s:if test="%{existGuiAppointment}">
						<a id="btn-edit-appointment" href="${contextPath}/appointment/edit?id=${guiAppointment.appointmentId}&aptDate=${guiAppointment.date}">
		                	<div class="tile double header fg-white bg-teal user-meta-info-container">
		                		<h6>Next Appointment</h6>
	                			<i class="icon-calendar fg-white"></i>
		                		<div class="subheader-secondary" style="margin-top: 15px;">${guiAppointment.date} | ${guiAppointment.time} PM</div>
		                	</div>
	               		</a>
               		</s:if>
               		<s:else>
	               		<a id="btn-add-appointment" href="${contextPath}/appointment/registration?aptDate=${todayDate}">
		                	<div class="tile double header fg-white bg-teal user-meta-info-container">
	                			<i class="icon-calendar fg-white"></i>
		                		<div class="subheader-secondary" style="margin-top: 15px;">New Appointment</div>
		                	</div>
	               		</a>
               		</s:else>
	                
	                <div>             		
	                	<a id="btn-add-appointment" href="${contextPath}/userlogin/edit?id=${guiPatient.userId}">
	                		<div class="tile half-vertical user-meta-info-container bg-lime fg-emerald">Edit Login</div>
	                	</a>	                	
	                	<a id="btn-list-appointments" href="${contextPath}/appointment/list?patientId=${guiPatient.userId}">
	                		<div class="tile half-vertical user-meta-info-container bg-lime fg-emerald">Appointments<i class="icon-calendar on-right"></i></div>
	                	</a>
	                	<a id="btn-list-prescriptions" href="${contextPath}/prescription/list?patientId=${guiPatient.userId}">
	                		<div class="tile half-vertical user-meta-info-container bg-lime fg-emerald">Prescriptions<i class="icon-clipboard-2 on-right"></i></div>
	                	</a>
	                </div>
	                
                </div>
                <br clear="all"/>
                
    		</div>    
    	</div>
        
        <%-- bottom-container --%>
    	<jsp:include page="/WEB-INF/content/common/BottomContainer.jsp" flush="true"/>
        
	</div>
    
    <%-- footer-container --%>
    <jsp:include page="/WEB-INF/content/common/FooterContainer.jsp" flush="true"/>
    
</body>
</html>
